<template>
  <div class="league_match">
    <div class="league_match_header DINAlternate">
      <div style="flex: 1">{{ data.league_name }}</div>
      <div class="width_52 margin_right_4">{{languageJson.home.win}}</div>
      <div class="width_52 margin_right_4">{{languageJson.home.lose}}</div>
      <div class="width_52">{{languageJson.home.draw}}</div>
      <div class="width_20"></div>
      <div class="width_52 margin_right_4">{{languageJson.home.home}}</div>
      <div class="width_52">{{languageJson.home.away}}</div>
      <div class="width_20"></div>
      <div class="width_52 margin_right_4">{{languageJson.home.over}}</div>
      <div class="width_52">{{languageJson.home.under}}</div>
    </div>
    <div class="league_match_content">
      <template v-if="more == 0">
        <MatchItem
          v-for="item in matchs.data"
          :key="item.match_id"
          :match="item"
          @click.stop="homeStore.clickmatch(item)"
        />
      </template>
      <template v-if="more == 1">
        <MatchItem
          v-for="item in matchs.alldata"
          :key="item.match_id"
          :match="item"
          @click.stop="homeStore.clickmatch(item)"
        />
      </template>
    </div>
    <div class="more flex">
      <div
        class="flex more_button AlibabaPuHuiTi_2_55_"
        v-if="matchs.ismore == true && more == 0"
        @click="clickmore()"
      >
        <div>{{languageJson.home.showMore}}</div>
        <img src="@/assets/home/zhankai2.png" style="widtyh: 8px; height: 8px; margin-left: 4px" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import MatchItem from './MatchItem.vue'

const props = defineProps({
  data: Object,
})

const { homeStore, homeState } = inject('HomeStore')
const languageJson = inject('languageJson')
const more = ref(0)
const matchs2 = ref({
  alldata: [],
  data: [],
  ismore: false,
  more: 0,
})

const matchs = computed(() => {
  let a = {
    alldata: [],
    data: [],
    ismore: false,
    more: 0, // 0：查看更多按钮显示   1：查看更多按钮隐藏
  }
  a.alldata = props.data.list
  if (props.data.list.length > 5) {
    a.ismore = true
    a.more = 0
    if (more.value != 1) {
      more.value = 0
    }
    a.data = props.data.list.slice(0, 5)
  } else {
    a.data = a.alldata
  }
  if (more.value == 1) {
    a.data = JSON.parse(JSON.stringify(a.alldata))
    a.more = 1
    a.ismore = true
  }

  return a
})

const clickmore = () => {
  matchs.more = 1
  matchs2.value.more = 1
  more.value = 1
}
</script>

<style lang="scss" scoped>
.league_match {
  width: 100%;
  background-color: #f8f9fe;
  display: flex;
  flex-direction: column;
  padding: 8px 8px 0 8px;
}

.league_match_header {
  display: flex;
  font-size: 12px;
  color: #666;
  font-weight: bold;
  margin-bottom: 4px;
  margin-right: 8px;
}

.league_match_content {
  display: flex;
  flex-direction: column;
}
.more {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}
.more_button {
  font-size: 12px;
  color: #666;
  align-items: center;
  cursor: pointer;
}
</style>

